<!--首页-搜索组件-->
<template>
  <div class="search">
    <el-autocomplete class="form"
        clearable
        placeholder="请输入医院名称"
        v-model="hosname"
        :fetch-suggestions="fetchData"
        :trigger-on-focus="true"
        v-on:select="goDetail"
    />
    <el-button type="primary" size="default" v-on:click="" :icon="Search">搜索</el-button>
  </div>

</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
//引入ElementPlus提供的图标
import {Search} from "@element-plus/icons-vue";
import {ref} from "vue";
import {reqHospitalInfo} from "@/api/home";
import {HospitalInfo,Content} from "@/api/home/type.ts";
//路由器对象
let $router = useRouter();
//收集搜索的关键字
let hosname = ref<string>("");
//获取组件的回调
const fetchData = async (keyword:string,callback:any) => {
  //当用户输入完后会触发
  let result:HospitalInfo = await reqHospitalInfo(keyword);
  //整理数据,变成ElementPlus组件需要的数据格式
  let showData = result.data.map(item=>{
    return{
      value: item.hosname,//医院名称
      hoscode:item.hoscode,//医院编码
    };
  });
  callback(showData);
};
//点击某一个推荐项
const goDetail = (item:any) => {
  //点击推荐项进入对应的医院详情
  $router.push({path:"/hospital/register",query:{hoscode:item.hoscode}});
}

</script>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0px;
  /*深度选择器:解决在scoped中,面对第三方组件时普通选择器无法生效的问题
    css深度选择器:>>>  less深度选择器:/deep/ scss深度选择器: ::v-deep(元素){样式}
  */
  ::v-deep(.el-input__wrapper) {
    width: 600px;
    margin-right: 10px;
  }
}
</style>

<script lang="ts" >export default {name:"Search"}</script>
